<template>
  <div class="app-container">
    <el-row type="flex" :gutter="20" class="row-bg">
      <el-col :span="16" style="padding-right: 200px">
        <h3>视频标题：{{this.title}}</h3>
        <p>发布时间：{{this.uploadtime}}</p>
        <vue-core-video-player :src="videourl"
                               v-if="open"
                               :title="title"
                               :cover="videocover"
                               style="width: 900px;height: 600px"
        ></vue-core-video-player>
      </el-col>
      <el-col :span="8" style="padding-top: 100px;margin-right: 200px">
        <el-table
          ref="singleTable"
          :data="videolist"
          highlight-current-row
          @current-change="handleCurrentChange">
          <el-table-column
            label="视频选集"
            prop="videoTitle">
            <template>

            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {listVideo,getVideo,addVideo,updateVideo,delVideo} from "@/api/siyun/video/video"
export default {
  data(){
    return {
      // 预览视频标题
      title:'',
      //预览视屏的上传时间
      uploadtime:null,
      //视屏封面
      videocover:'',
      //视频数据
      videolist: [],
      //发送请求产数
      queryParams:{
        videoCourseid:0
      },
      videourl:'',
      open:false
    }
  },
  created() {
    this.queryParams.videoCourseid = this.$store.state.shipin.videoCourseid
    this.getvideolist()
    console.log(this.videolist)
    setTimeout(()=>{
      this.videourl = this.videolist[0].videoUrl
      this.title = this.videolist[0].videoTitle
      this.uploadtime = this.videolist[0].videoUploadtime
      this.videocover = "http://localhost:8080"+this.videolist[0].videoImageurl
      console.log(this.videourl)
      this.open = true
    },800)
  },
  methods:{
    //视频请求方法
    getvideolist(){
      console.log(this.queryParams.videoCourseid)
      listVideo(this.queryParams).then(response => {

          var data = response.data;
          data.forEach(item => {
            this.videolist.push(item)
          });

      })
    },
    handleCurrentChange(val){
      console.log(val)
      this.videourl = val.videoUrl
      this.title = val.videoTitle
      this.uploadtime = val.videoUploadtime
    }
  }
}
</script>

<style>
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
